.btn {
  font-family: $small-font;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: $fat;
  -webkit-appearance: none;
  -webkit-appearance: normal;
  outline: none;
  background-color: transparent;
  padding: 0 $base-spacing-unit;
  border-radius: 100px;
  font-size: $h4-size;
  line-height: $base-spacing-unit * 2 - 2 * $border-width;
  transition: background-color $transition-easing $transition-speed,
    color $transition-easing $transition-speed;
}

.btn--normal {
  border: $border-width $action-color solid;
  color: darken($action-color, 30%);
  &:hover {
    background-color: rgba($action-color, 0.2);
  }
}

.btn--inverted {
  border: $border-width $background-color solid;
  color: $background-color;
  &:hover {
    background-color: $background-color;
    color: darken($action-color, 30%);
  }
}
